<template>
    <el-container class="main">
        <el-header height="50px" class="header">
          <span class="name">流量监控系统</span>
            <el-container>
                <el-header class="setting">
                    <el-dropdown>
                        <i class="el-icon-setting"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>欢迎,???</span>
                </el-header>
            </el-container>
        </el-header>
        <el-container>
          <el-aside width="220px" :style="asideHeight">
              <el-menu router :default-active="$route.path"
              background-color="#545c64"
              text-color="rgb(186,194,198)"
              active-text-color="rgb(255,255,255)" :unique-opened="true">
                  <el-submenu index="1">
                      <template slot="title"><i class="el-icon-money"></i>数据查看</template>
                          <el-menu-item index="/data">总体数据</el-menu-item>
                          <el-menu-item index="/chart">图表分析</el-menu-item>
                  </el-submenu>
                  <el-submenu index="2">
                      <template slot="title"><i class="el-icon-setting"></i>数据操作</template>
                          <el-menu-item index="/page4">获取最新数据</el-menu-item>
                          <el-menu-item index="/detail">请求详情</el-menu-item>
                  </el-submenu>
                  <!-- <el-submenu index="3">
                      <template slot="title"><i class="el-icon-share"></i>导航3</template>
                          <el-menu-item index="/page1">选项1</el-menu-item>
                          <el-menu-item index="/page2">选项2</el-menu-item>
                          <el-menu-item index="/page3">选项3</el-menu-item>
                  </el-submenu>
                  <el-submenu index="4">
                      <template slot="title"><i class="el-icon-help"></i>导航4</template>
                          <el-menu-item index="/page1">选项1</el-menu-item>
                          <el-menu-item index="/page2">选项2</el-menu-item>
                  </el-submenu>
                  <el-submenu index="5">
                      <template slot="title"><i class="el-icon-data-analysis"></i>导航5</template>
                          <el-menu-item index="/page1">选项1</el-menu-item>
                          <el-menu-item index="/page2">选项2</el-menu-item>
                          <el-menu-item index="/page3">选项3</el-menu-item>
                          <el-menu-item index="/page4">选项4</el-menu-item>
                  </el-submenu>
                  <el-submenu index="6">
                      <template slot="title"><i class="el-icon-document"></i>导航6</template>
                          <el-menu-item index="/page1">选项1</el-menu-item>
                          <el-menu-item index="/page2">选项2</el-menu-item>
                  </el-submenu> -->
              </el-menu>
          </el-aside>
          <el-main class="content">
              <router-view></router-view>
          </el-main>
        </el-container>
    </el-container>
</template>

<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>